<template>
    <div class="main">
        <el-card class="box-card">
            <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input v-model="page.name" placeholder="请输入名称"  />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" style="margin-bottom: 30px;" @click="addEdiClick(1)">添加商圈</el-button>
            <el-table :data="tableData" style="width: 100%" max-height="600px"
                @selection-change="handleSelectionChange">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="name" label="名称" align="center">
                </el-table-column>
                <el-table-column prop="sort" label="排序" align="center">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center">
                </el-table-column>
                <el-table-column label="状态" width="160">
                    <template #default="scope">
                        <!-- <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" /> -->
                         {{ scope.row.status == 0 ? '启用' : '禁用' }}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="addEdiClick(2, scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="delData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </el-card>
    </div>
    <!-- 新增修改 -->
    <el-dialog v-model="dialogVisible" :title="title" width="500px" :before-close="handleClose" top="30vh">
        <div style="width: 400px;padding: 0 20px;">
            <el-form ref="ruleFormRef" :model="formpage" label-width="90px" :rules="rules" :size="formSize" status-icon>
                <el-form-item label="商圈姓名" prop="name">
                    <el-input v-model="formpage.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="formpage.sort" placeholder="请输入" maxlength="4"  show-word-limit/>
                    <div>注:数值越大越靠前</div>
                </el-form-item>
                <el-form-item label="是否展开">
                    <el-radio-group v-model="formpage.status">
                        <el-radio label="是" value="0">是</el-radio>
                        <el-radio label="否" value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveData(ruleFormRef)">
                        确认
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script setup>
import { getBusinessListDelete, getBusinessList, addBusinessList, getBusinessListUpdate } from '@/api/merchant.js'
import { onMounted, reactive, ref } from 'vue'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)
const page = reactive({
    name: "",
    pageNum: 1,
    pageSize: 10
})
const formpage = reactive({
    sort: '',
    name: '',
    status: '0',
})
const rules = reactive({
    name: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    sort: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
})
const formSize = ref('default')
const ruleFormRef = ref()
const total = ref(0)
const tableData = reactive([])
const rowData = reactive({
    row: {}
})
const multipleSelection = ref([])
const title = ref('')
const isAdd = ref(false)

// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.name = "";
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    // page.pageSize = 10
    getList()
}

// 弹框关闭
const handleClose = () => {
    dialogVisible.value = false
}
// 查看
const addEdiClick = (num, row) => {
    dialogVisible.value = true
    rowData.row = row
    if (num == 1) { // 新增
        title.value = '新增商圈'
        isAdd.value = true
        formpage.sort = ''
        formpage.name = ''
        formpage.status = '0'
    } else {
        title.value = '修改商圈'
        isAdd.value = false
        formpage.sort = row.sort
        formpage.name = row.name
        formpage.status = row.status
    }
}
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log(val);

}
// 保存
const saveData = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (isAdd.value) {
                // 新增
                addBusinessList(formpage).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            message: res.msg,
                            type: 'success'
                        });
                        dialogVisible.value = false
                        getList()
                    }
                })
            } else {
                //修改
                getBusinessListUpdate({ ...formpage, id: rowData.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            message: res.msg,
                            type: 'success'
                        });
                        dialogVisible.value = false
                        getList()
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })

}
// 删除
const delData = (scope) => {
    ElMessageBox.confirm(
        '是否删除该条数据?',
        '删除',
        {
            confirmButtonText: 'OK',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            getBusinessListDelete(scope.id).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getList()
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

onMounted(() => {
    getList()
})
// 获取列表
const getList = () => {
    tableData.length = 0
    total.value = 0
    getBusinessList(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.records)
            total.value = res.data.total
        }
    })
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
    width: 100%;
    min-width: 1000px;
    word-wrap: normal;

    ::v-deep .el-date-editor {
        width: 330px !important;
    }
}

.box-card :deep(.el-select__wrapper) {
    width: 100px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.main {
    padding: 0 5px 5px 5px;
}
</style>